<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        总结
        1.想让Vue工作 ,必须创建Vue实例,并且要传入一个配置对象:
        2.root容器里的代码依然符合Html规范,只不过混入一些特殊的Vue语法
        3.root实例和容器是一一对应的,并且会配合着组建一起使用
        4.root容器里的代码被称为[Vue模板]
        5.{{xxx}} 中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
        6.真是开发中只有一个Vue实例,并且会配合着组建一起使用:
        7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新
     -->
    <!-- 准备好容器 -->
    <div id="root">
        <h1>hello! {{dd}}</h1>    
    </div>
    <!-- 
        区分js表达式 和 js代码(语句)
            1. 表达式: 一个表达式会生成一个值, 可以放在任何一个需要值的地方:

     -->
    <div id="root2">
        <h1>地址,{{ 1 === 2 ? Date.now() : address }}</h1>
    </div>

    <script type="text/javascript">
        // 阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false
        // 创建Vue实例
        const vm = new Vue({
            // el 用于指定当前Vue 实例为哪个容器服务,值通常为css选择器字符串
            el:'#root',
            // el:document.getElementById('root')
            // data用于数据存储,数据拱el所指定的容器去使用.
            data() {
                return {
                    dd:'1'
                }
            },
        })

        new Vue({
            el:'#root2',
            data:{
                address:'一一对应'
            }
        })
    </script>
</body>
</html>